<style lang="scss" scoped></style>

<template>
  <div class="w-full h-full">
    <p class="text-red-500">假装这是屏幕窗口↓，现在中间展示的是固定1920:1080</p>
    <a-resize-box
      :directions="['left', 'top', 'right', 'bottom']"
      :style="{ width: '500px', height: '200px', maxWidth: '100%', maxHeight: '100%' }"
    >
      <div class="h-full w-full relative" ref="box1Ref">
        <div v-bind="bindInfo1" class="bg-red-300 p-20 text-white text-9xl">
          这里是核心内容，这个字体大小是128px，因为缩放显的比较小
        </div>
      </div>
    </a-resize-box>

    <p class="text-red-500">假装这是屏幕窗口↓，现在中间展示的是固定1920:1080，并添加了rotate</p>
    <a-resize-box
      :directions="['left', 'top', 'right', 'bottom']"
      :style="{ width: '500px', height: '200px', maxWidth: '100%', maxHeight: '100%' }"
    >
      <div class="h-full w-full relative" ref="box2Ref">
        <div v-bind="bindInfo2" class="bg-red-300 p-20 text-white text-9xl">
          这里是核心内容，这个字体大小是128px，因为缩放显的比较小
        </div>
      </div>
    </a-resize-box>
  </div>
</template>

<script lang="ts" setup>
const box1Ref = ref()
const box1SizeInfo = useElementSize(box1Ref)
const bindInfo1 = useAutoScale(box1SizeInfo, { width: 1920, height: 1080 })

const box2Ref = ref()
const box2SizeInfo = useElementSize(box2Ref)
const bindInfo2 = useAutoScale(box2SizeInfo, { width: 1920, height: 1080, useRotate: true })
</script>
